<template>
     <div id="menu-wrapper" v-show="this.operationToggle">
        <div class="icon-wrapper">
          <span class="icon-menu"></span>
        </div>
       <div class="icon-wrapper">
         <span class="icon-progress"></span>
       </div>
       <div class="icon-wrapper">
         <span class="icon-bright"></span>
       </div>
       <div class="icon-wrapper">
         <span class="icon-A"></span>
       </div>
     </div>
</template>

<script>
  import {mapGetters} from 'vuex';
    export default {
        name: "EbookMenu",
        computed:{
          ...mapGetters(['operationToggle'])
        }
    }
</script>

<style lang="stylus" scoped>
    span[class^='icon-']
      font-size: 0.5rem
      color: #333
     #menu-wrapper
        position: absolute
        bottom: 0
        left: 0
        width: 100%
        height: 1rem
        z-index: 101
        display: flex
        background-color: #fff
        box-shadow: 0 -5px 5.5px rgba(0,0,0,0.15)
        .icon-wrapper
           flex: 1
           display: flex
           justify-content: center
           align-items: center
</style>
